<template>

    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input v-model="query.title" placeholder="代练管理"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                    <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click.native="handleForm(null,null)">新增</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>

        <el-table
            v-loading="loading"
            :data="list"
            style="width: 100%;">
            <el-table-column
                label="ID"
                prop="id"
                fixed>
            </el-table-column>
            <el-table-column
                label="类别"
                prop="category"
                :show-overflow-tooltip="true"
                fixed>
                <template slot-scope="scope">
                    {{ opMap[scope.row.category] }}
                </template>
            </el-table-column>
            <el-table-column
                label="标题"
                prop="title"
                :show-overflow-tooltip="true"
                fixed>
            </el-table-column>
            <el-table-column
                label="销售价"
                prop="price"
                :show-overflow-tooltip="true"
                fixed>
            </el-table-column>
            <el-table-column
                label="发布时间"
                prop="createTime"
                :show-overflow-tooltip="true"
                fixed>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click.native="handleForm(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click.native="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            :page-size="query.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>

        <!--表单-->
        <el-dialog
            :title="formMap[formName]"
            :visible.sync="formVisible"
            :before-close="hideForm"
            width="80%"
            top="5vh">
            <el-form label-position="left" label-width="80px" :model="formData" :rules="formRules" ref="dataForm">
                <el-row>
                    <el-col :span="10">
                        <el-form-item  label="所属类别" prop="category">
                            <!--                    <el-input v-model="formData.gameServer" auto-complete="off"></el-input>-->
                            <el-select v-model="formData.category" placeholder="请选择所属类别">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="10" :offset="2">-->
<!--                        <el-form-item label="是否发布" prop="isPublish">-->
<!--                            <el-switch :active-value="1" :inactive-value="0" v-model="formData.isPublish"></el-switch>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="内容标题" prop="title">
                            <el-input maxlength="100" v-model="formData.title" auto-complete="off">
                            </el-input>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="10" :offset="2">-->
<!--                        <el-form-item label="副标题" prop="subTitle">-->
<!--                            <el-input v-model="formData.subTitle" auto-complete="off" maxlength="100" >-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>


<!--               <el-row>-->
<!--                   <el-col :span="10">-->
<!--                       <el-form-item label="Tags标签" prop="tags">-->
<!--                           <el-input placeholder="标签，多个使用英文逗号分隔。如：A,B" v-model="formData.tags" auto-complete="off">-->
<!--                           </el-input>-->
<!--                       </el-form-item>-->
<!--                   </el-col>-->
<!--                   <el-col :span="10" :offset="2">-->
<!--                       <el-form-item label="封面图片" prop="pic">-->
<!--                           <el-card style="width: 100px" class="box-card w100" v-if="formData.pic">-->
<!--                               <img :src="formData.picUrl" style="width: 100%;" alt="">-->
<!--                           </el-card>-->
<!--                           &lt;!&ndash;                        <upload ext="jpg" :width="100" @on-select="onSelect1"></upload>&ndash;&gt;-->
<!--                           <upload ext="jpg,png"  @on-select="onSelect"></upload>-->
<!--                       </el-form-item>-->
<!--                   </el-col>-->
<!--               </el-row>-->
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="销售价格" prop="price">
                            <el-input placeholder="出售的实际交易价格" v-model="formData.price"
                                      type="number"   >
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="10" :offset="2">-->
<!--                        <el-form-item label="排序" prop="sort">-->
<!--                            <el-input-number v-model="formData.sort" :min="1" :max="1000" label="数字，越小越向前"></el-input-number>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="调用别名" prop="alias">-->
<!--                            <el-input v-model="formData.alias" ></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10" :offset="2">-->
<!--                        <el-form-item label="URL链接" prop="url">-->
<!--                            <el-input v-model="formData.url" ></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->

<!--                <el-form-item label="内容" prop="detail">-->
<!--                    <tinymce style="display: inline-block;width: 100%;" :height="300" v-model="formData.detail"/>-->
<!--                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="hideForm">取消</el-button>
                <el-button type="primary" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
            </div>
        </el-dialog>

    </div>

</template>



<script>
import { save, list, del} from "../../api/dnf/train";
import Upload from "../../components/File/Upload.vue";
import {IMG_BASE_URL} from "@/config/app";
import Tinymce from "@/components/Tinymce/index.vue";
const formJson = {
    id: "",
    category: "",
    isPublish: "",
    pic: "",
    price: "",
    remark: "",
    sort: "1",
    subTitle: "",
    tags: "",
    title: "",
    viewCount: "",
    url: "",
    detail: ""
};
export default {
    data() {
        return {
            opMap:{
                "1": "包节日套",
                "2": "强化增幅",
                "3": "合龙袍天空",
                "4": "pk代练",
                "5": "等级代练",
                "6": "深渊代练",
                "7": "其他"
            },
            options: [
                //1 包节日套 2 强化增幅 3 合龙袍天空 4 pk代练 5 等级代练 6 深渊代练 7 其他
                {
                    value: "1",
                    label: "包节日套"
                },
                {
                    value: "2",
                    label: "强化增幅"
                },
                {
                    value: "3",
                    label: "合龙袍天空"
                },
                {
                    value: "4",
                    label: "pk代练"
                },
                {
                    value: "5",
                    label: "等级代练"
                },
                {
                    value: "6",
                    label: "深渊代练"
                },
                {
                    value: "7",
                    label: "其他"
                },
            ],
            query: {
                title: "",
                type: 1,
                page: 1,
                limit: 8
            },
            channelListInput: "",
            androidVersionListInput: "",
            iosVersionListInput: "",
            list: [],
            total: 0,
            loading: true,
            index: null,
            formName: null,
            formMap: {
                add: "新增",
                edit: "编辑"
            },
            formLoading: false,
            formVisible: false,
            formData: formJson,
            formRules: {
                category: [
                    {
                        required: true,
                        message: "请选择类别",
                        trigger: "blur"
                    }
                ],
                isPublish: [
                    {
                        required: true,
                        message: "请选择是否发布",
                        trigger: "blur"
                    }
                ],
                price: [
                    {
                        required: true,
                        message: "请输入销售价",
                        trigger: "blur"
                    }
                ],
                remark: [
                    {
                        required: true,
                        message: "请输入摘要",
                        trigger: "blur"
                    }
                ],
                sort: [
                    {
                        required: true,
                        message: "请输入排序",
                        trigger: "blur"
                    }
                ],
                subTitle: [
                    {
                        required: true,
                        message: "请输入子标题",
                        trigger: "blur"
                    }
                ],
                tags: [
                    {
                        required: false,
                        message: "请输入标签",
                        trigger: "blur"
                    }
                ],
                title: [
                    {
                        required: true,
                        message: "请输入标题",
                        trigger: "blur"
                    }
                ],
                url: [
                    {
                        required: true,
                        message: "请输入地址",
                        trigger: "blur"
                    }
                ],
                detail: [
                    {
                        required: true,
                        message: "请输入内容",
                        trigger: "blur"
                    }
                ],
            },
            deleteLoading: false
        };
    },
    components: {
        Tinymce,
        Upload
    },
    methods: {
        onSelect(filePath, filePathUrl) {
            // this.filePath1 = filePath;
            // this.filePathUrl1 = IMG_BASE_URL + filePath;
            this.formData.pic = filePath
            this.formData.picUrl = filePathUrl;
        },
        IMG_BASE_URL() {
            return IMG_BASE_URL
        },
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                title: "",
                page: 1,
                limit: 20
            };
            this.getList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query
            });
            this.getList();
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
        getList() {
            this.loading = true;
            list(this.query)
                .then(response => {
                    this.loading = false;
                    this.list = response.data.records || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        // 删除渠道
        handleChannelListClose(index) {
            console.log(index);
            // 更改值
            this.formData.channelList.splice(index, 1);
        },
        // 添加渠道白名单
        handleChannelListSubmit() {
            // 更改值
            if (
                this.channelListInput &&
                this.formData.channelList.length < 15
            ) {
                let arr = this.channelListInput.split(",");
                for (let i in arr) {
                    if (
                        arr[i] !== "" &&
                        (this.formData.channelList.length === 0 ||
                            this.formData.channelList.indexOf(arr[i]) < 0)
                    ) {
                        this.formData.channelList.push(arr[i]);
                    }
                }
                this.channelListInput = "";
                this.$refs.channelListRef.focus();
            }
        },
        // 刷新表单
        resetForm() {
            if (this.$refs["dataForm"]) {
                // 清空字段
                this.$refs["dataForm"].resetFields();
                // 清空验证信息表单
                this.$refs["dataForm"].clearValidate();
            }
        },
        // 隐藏表单
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            return true;
        },
        // 显示表单
        handleForm(index, row) {
            this.formVisible = true;
            // 刷新表单
            this.resetForm();
            this.formData = JSON.parse(JSON.stringify(formJson));
            if (row !== null) {
                this.formData = Object.assign({}, row);
            }
            this.formName = "add";
            if (index !== null) {
                this.index = index;
                this.formName = "edit";
            }
        },
        formSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    let data = Object.assign({}, this.formData);
                    save(data, this.formName)
                        .then(response => {
                            this.formLoading = false;
                            if (response.code) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("操作成功");
                            this.formVisible = false;
                            this.getList();
                            // if (this.formName === "add") {
                            //     // 向头部添加数据
                            //     data.adId = response.data.adId;
                            //     this.list.unshift(data);
                            // } else {
                            //     this.list.splice(this.index, 1, data);
                            // }
                        })
                        .catch(() => {
                            this.formLoading = false;
                        });
                }
            });
        },
        // 删除
        handleDel(index, row) {
            if (row.id) {
                this.$confirm("确认删除该记录吗?", "提示", {
                    type: "warning"
                })
                    .then(() => {
                        let para = {id: row.id };
                        this.deleteLoading = true;
                        del(para)
                            .then(response => {
                                this.deleteLoading = false;
                                if (response.code) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message("删除成功");
                                // 刷新数据
                                this.list.splice(index, 1);
                            })
                            .catch(() => {
                                this.deleteLoading = false;
                            });
                    })
                    .catch(() => {
                        this.$message.info("取消删除");
                    });
            }
        },
        onSelectPic(filePath, filePathUrl) {
            this.formData.pic = filePath;
            this.formData.picUrl = filePathUrl;
        }
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                0: "gray",
                1: "success"
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常"
            };
            return statusMap[status];
        }
    },
    mounted() {},
    created() {
        // 将参数拷贝进查询对象
        let query = this.$route.query;
        this.query = Object.assign(this.query, query);
        this.query.limit = parseInt(this.query.limit);
        // 加载表格数据
        this.getList();
    }
};
</script>

<style type="text/scss" lang="scss">
</style>
